<script setup>
import { ref, onMounted } from 'vue'
import LogoImg from '@/assets/img/1.png'
import routes from '@/commons/router'
import { useRoute } from 'vue-router'
import { oneExamApi } from '@/commons/api'
import Loader from '@/components/loader/Loader'
import Msg from '@/components/message'

// 定义是否显示加载中的变量
let loadShow = ref(false)

// 加载后调用监听滚动
onMounted(() => {
  checkInfo()
})

let examId, stud
const checkInfo = () => {
  examId = useRoute().params.examId
  stud = JSON.parse(localStorage.getItem('stud'))
  if(!examId || examId === '' || examId.length !== 21) {
    Msg({ kind: 'error', txt: '未找到考试的试卷，请联系管理员！' })
    return
  }
  if(!stud || stud.realName==='') {
    Msg({ kind: 'error', txt: '请先填写员工信息！' })
    routes.replace('/login/' + examId)
    return
  }
  oneExam()
}

const examRef = ref({})
const videoUrl = ref('')
const oneExam = async () => {
  loadShow.value = true
  try {
    const res = await oneExamApi({ examId })
    if(res.code === '1000') {
      examRef.value = res.data
      stud.examTime = res.data.examTime
      localStorage.setItem('stud', JSON.stringify(stud))
      if(res.data.imgNames) {
        videoUrl.value = res.data.imgUrls
      }
    } else {
      Msg({ kind: 'error', txt: '暂无考试！' })
      routes.replace('/login/' + examId)
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

const toLog = () => {
  routes.replace('/log/' + examId)
}

const test = () => {
  routes.replace('/test/' + examId)
}
</script>

<template>
  <div class="exam-a">
    <div class="exam-b">
      <div class="exam-c"><img :src="LogoImg" class="w100" alt="logo" /></div>
    </div>
    <div class="exam-f">
      <div class="exam-g">{{ examRef.title }}</div>
      <div class="exam-h txt-center">时长：{{ examRef.examTime }}分钟 总分：{{ examRef.score }}分</div>
      <div v-if="videoUrl"><video controls width="100%"><source :src="videoUrl" type="video/mp4" /></video></div>
      <div class="exam-i" v-html="examRef.remarks"></div>
      <div class="exam-j" @click="test">开始答题</div>
    </div>
    <loader :loadShow="loadShow" />
  </div>
</template>

<style>
.exam-a {width: 100%; height: 100%;}
.exam-b {width: 100%; display: -webkit-flex; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0;}
.exam-c {width: 2.5rem; height: 2.5rem; padding: 0.5rem 0 0.5rem 1.5rem;}
.exam-d {flex-grow: 1; font-size: 1.3rem; color: #333; text-align: center;}
.exam-e {width: 2.5rem; text-align: right; padding-right: 1.5rem; font-size: 1.5rem; color: #009688;}
.exam-f {height: calc(100% - 6.5rem); overflow: auto;}
.exam-g {padding: 2rem 1rem; text-align: center; font-size: 1.6rem;}
.exam-h {padding: 0.5rem 0; text-align: center; font-size: 0.9rem; color: #666; border-bottom: 1px solid #f0f0f0;}
.exam-i {padding: 1rem; line-height: 2rem;}
.exam-j {padding: 0.8rem 0; margin-top: 2rem; color: #FFF; background-color: #2f73ff; border: 0; border-radius: 10px; cursor: pointer; text-align: center; font-size: 1.2rem;}
</style>